<template>

    <div id="dashboard">
        <vHeadSpace />
        <div class="outcontainer">
            <vAsideSpace />
            <el-main class="addtable_main">
                <div class="content" style="margin-top: 80px;">
                    <el-form ref="form"  :inline="true" :model="form" label-width="80px">
                        <div v-if="form.dynamicItem.length != 0">
                            <div  v-for="(item, index) in form.dynamicItem" :key="index">
                                <el-form-item
                                        label="主机名">
                                    <div class="info-pane">
                                        <span @click="IteminfoClick(index)"  >:{{form.dynamicItem[index].host}}</span>
                                    </div>
                                </el-form-item>
                                <el-form-item>
                                    <el-button v-if="index+1 == form.dynamicItem.length " @click="addItem" type="primary">增加</el-button>
                                    <el-button v-if="index !== -1" @click="deleteItem(item, index)" type="danger">删除</el-button>
                                </el-form-item>
                            </div>
                        </div>
                        <div v-else>
                            <el-button  @click="addItem" type="primary">增加</el-button>
                        </div>
                        <div>
                            <el-button @click="addAllHost">确定添加</el-button>
                            <el-button @click="clearAll">取消添加</el-button>
                        </div>
                    </el-form>
                    <div class="add-form">
                        <el-dialog title="新增" :visible.sync="dialogFormVisible" width="1000px"
                                   :before-close="handleClose" >
                            <el-form :model="formData" :rules="rules" ref="formData" label-width="100px">
                                <!--设备名-->
                                <el-row :gutter="4">
                                    <el-col :span="8">
                                        <el-form-item label="设备名称" prop="host">
                                            <el-input v-model="formData.host" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="设备类型" prop="type">
                                            <!--多选加上multitude-->
                                            <el-select v-model="formData.type">
                                                <el-option label="服务器" value="1" ></el-option>
                                                <el-option label="交换机" value="2" ></el-option>
                                                <el-option label="防火墙" value="3" ></el-option>
                                                <el-option label="单向网闸" value="4" ></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="2">
                                    <el-col :span="8">
                                        <el-form-item label="ip地址" prop="ip">
                                            <el-input v-model="formData.ip"/>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="DNS名称" prop="dns">
                                            <el-input v-model="formData.dns"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <!--agentSystemType(linux or windows)-->
                                <div>
                                    <el-row :gutter="4">
                                        <el-col :span="8">
                                            <el-form-item label="端口" prop="port" >
                                                <el-input v-model="formData.port" />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="系统" prop="systemType">
                                                <el-select v-model="formData.systemType">
                                                    <el-option value="1" label="Linux" />
                                                    <el-option value="2" label="Windows"/>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </div>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="描述信息">
                                            <el-input v-model="formData.description" type="textarea" />
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取消</el-button>
                                <el-button type="primary"  @click="sureItem('formData')" >确定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                </div>
                <div style="height:3%;background-color: #F0F2F5;text-align: center;">
                    <vFootSpace/>
                </div>
            </el-main>
        </div>
    </div>

</template>

<script>
    import axios from 'axios'
    export default {
        name: "AddTable",
        data (){
            return {
                form: {
                    dynamicItem: []
                },
                dialogFormVisible: false,
                formData: {
                    type: '1',
                    systemType: '1',
                }, // 添加表单
                rules: { // 校验规则
                    host: [{ required: true, message: '主机名为必填项', trigger: 'blur' },
                          {pattern: /^(?![a-zA-Z]*$)(?![0-9]*$)[a-zA-Z]{1}[a-zA-Z0-9]{5,19}$/,
                           message: '以非数字开头的6-20位字母和数字组合', trigger: 'blur'}],
                    // groupIds: [{ required: true, message: '主机群组为必填项', trigger: 'blur' }],
                    type: [{ required: true, message: '类型为必填项', trigger: 'blur' }],
                    version: [{ required: true, message: '版本为必填项', trigger: 'blur' }],
                    systemType: [{ required: true, message: '系统类型为必选项', trigger: 'blur' }],
                    ip: [{ required: true, message: 'IP地址为必填项', trigger: 'blur' },
                        {pattern: /^(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])$/,
                            message: '非法IP地址', trigger: 'blur'}],
                    port: [{ required: true, message: '端口为必填项', trigger: 'blur' },
                        {pattern: /^([1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-4])$/, message: '非法的端口号', trigger: 'blur'}]
                },
            }
        },
        methods: {
            addItem() {
                this.dialogFormVisible = true
                this.form.dynamicItem.push({
                    formData: {},
                });
            },
            addAllHost(){
                let newFilArr = this.form.dynamicItem.filter((item,i)=>{
                    axios.post('/host/createHost.action', item).then((res) => {
                        if (res.data.status) { // 执行成功
                            // 关闭新增窗口
                            this.dialogFormVisible = false

                            // 弹出提示信息
                            this.$message({
                                message: res.data.content.message,
                                type: 'success'
                            })
                        } else { // 执行失败
                            // 弹出提示
                            this.$message.error(res.data.content.message)
                        }
                    })
                })
                // 新增成功后，重新调用分页查询方法，查询出最新的数据
                this.pageJump('hostSetting');
                this.findAllHost()
            },
            pageJump(url, data) {
                this.$router.push({path: url, query: data })
            },
            findAllHost() {
                axios.get('/host/getAllHosts.action?currentPage='+this.currentPage+'&pageSize='+this.pageSize).then((res) => {
                    // 解析Controller响应回的数据，为模型数据赋值
                    this.dataList = res.data.content.hosts
                    this.total = res.data.content.total
                    this.interfaces = res.data.content.interfaces
                    this.loading = false
                })
            },
            sureItem(formData) {
              this.dialogFormVisible = false
                console.log(this.form.dynamicItem)
              this.form.dynamicItem[this.form.dynamicItem.length - 1] = this.formData;
              this.formData = {
                  type: '1',
                  systemType: '1',
              }

            },
            sure(form) {
                console.log(this.form.dynamicItem.length, "length");
                this.$refs[form].validate(valid => {
                    if (valid) {
                        alert("submit!");
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },
            deleteItem(item, index) {
                this.form.dynamicItem.splice(index, 1);
                console.log(this.form.dynamicItem, "删除");
            },
            clearAll() {
              this.form.dynamicItem = []
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                        this.form.dynamicItem.splice(this.form.dynamicItem.length-1, 1);
                    })
                    .catch(_ => {});
            },
            IteminfoClick(index) {
                this.formData = this.form.dynamicItem[index]
                this.dialogFormVisible = true
            }
        }
    }
</script>

<style scoped>
    .info-pane {
        cursor:pointer;
    }
    #dashboard{
        height: 100%;
        width: 100%;
        background-color: #F0F2F5;
        position: absolute;
    }
    .outcontainer{
        margin-top: 60px;
        display: flex;
        height: 92%;
        width: 100%;
    }
    .addtable_main{
        padding: 10px;
        height: 100%;
        width: 100%;
        margin-top: 0;
    }
    .content{
        width: 100%;
        height: 97%;
        margin-top: 0 !important;
        overflow-x:hidden
    }
</style>
